<template>
	<view>
		<view class="tabs">
			<u-tabs active-color="#F3060D" inactive-color="#333333" :list="list" :is-scroll="false" :current="current"
				@change="change"></u-tabs>
		</view>
		<scroll-view scroll-y class="scroll-view">
			<view class="item" v-for="(item, index) in 15">
				<view class="status fcs">
					<view class="l">
						订单号：5612561656156
					</view>
					<view class="s">
						待配送
					</view>
				</view>
				<view class="goods">
					<view class="img">
						<image class="img"
							src="https://img.js.design/assets/img/668c9ee084a543139ecb06cb.jpg#4daecb55af26b59c4ba5893a9ca94283"
							mode=""></image>
						<div class="giveaway">
							赠品
						</div>
					</view>
					<view class="info">
						<view class="tinfo">
							<view class="t">
								商品名称
							</view>
							<view class="n">
								数量：50瓶
							</view>
						</view>
						<view class="p">
							<text class="u">¥</text>
							<text class="pp">99</text>
						</view>
					</view>
				</view>
				<view class="btns">
					<u-button size="mini" shape="circle" @click="toPath('/pages/change-address/change-address')">更换收获地址</u-button>
					<u-button size="mini" shape="circle">暂停配送</u-button>
					<u-button size="mini" shape="circle" @click="toPath('/pages/refund/refund')">退款</u-button>
					<u-button size="mini" shape="circle" :custom-style="customStyle" @click="toPath('/pages/order/detail')">查看详情</u-button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					backgroundColor: '#F3060D',
					color: '#FFF'
				},
				list: [{
					name: '订单列表'
				}, {
					name: '待配送'
				}, {
					name: '确认收货'
				}, {
					name: '变更订单'
				}, {
					name: '退货单'
				}],
				current: 0
			};
		},
		onLoad(e) {
			if (e.type) this.current = e.type
		},
		methods: {
			toPath(path) {
				uni.navigateTo({
					url: path
				})
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view {
		padding: 20rpx;
		box-sizing: border-box;
		height: calc(100vh - 82rpx);
		.item {
			background-color: #FFF;
			box-sizing: border-box;
			padding: 28rpx 27rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.btns {
				margin-top: 21rpx;
				padding: 21rpx 0 0;
				border-top: 1rpx solid #F4F5F7;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				::v-deep .u-btn {
					margin-left: 20rpx;
				}
			}

			.goods {
				display: flex;
				align-items: center;
				margin-top: 21.5rpx;

				.info {
					height: 180rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.pp {
						color: #E93E30;
						font-size: 30rpx;
						font-weight: 500;
					}

					.u {
						color: #E93E30;
						font-size: 24rpx;
						font-weight: 500;
					}

					.n {
						margin-top: 14rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}

					.t {
						font-size: 26rpx;
						font-weight: 400;
						color: #1E1E1E;
					}
				}

				.img {
					width: 180rpx;
					height: 180rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
					position: relative;
					.giveaway {
						position: absolute;
						top: 0;
						left: 0;
						background-color: #F3060D;
						font-size: 20rpx;
						color: #FFF;
						border-radius: 10rpx 0 10rpx 0;
						padding: 5rpx 10rpx;
					}
				}
			}

			.status {
				.s {
					font-size: 24rpx;
					font-weight: 400;
					color: #F3060D;
				}

				.l {
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}
</style>